<template>
  <el-dialog title="文件导入提示" :visible.sync="isshow" width="30%">
      <el-form :model="form">
          <el-form-item label="上传文件" :label-width="formLabelWidth">
              <el-upload ref="uploadDat" action="" :limit=limitNum :auto-upload="false" :accept="(text.prgname == 'LIS141' || text.prgname == 'LIS825')?'.xls,.xlsx':'.dat,.repx'" :before-upload="beforeUploadFile" :on-change="fileChange" :on-exceed="exceedFile" :file-list="fileList">
                  <el-button size="small" plain>选择文件</el-button>
                  <div v-if="text.prgname == 'LIS141' || text.prgname == 'LIS825'" slot="tip" class="el-upload__tip">只能上传EXCEL(.XLS,.XLSX)文件，且不超过10M</div>
                  <div v-else slot="tip" class="el-upload__tip">只能上传DAT(*dat)或者REPX(.repx)文件，且不超过10M。<br>提示：REPX文件文件格式为：<br>格式1： <span style="color:red">报告单名称,报告单类别,特殊处理方式.repx</span> <br>或格式2：<span style="color:blue">报告单ID 报告单名称 报告单类别 特殊处理方式.repx</span></div>
              </el-upload>
          </el-form-item>
          <div style="display:none">
              <button type="button" @click="isSuccess">
                  <span>
                      {{text.btn.confirmBtnText}}
                  </span>
              </button>
          </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
          <el-button @click="isshow = false">取 消</el-button>
      </span>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  data() {
      return {
          limitNum: 1,
          formLabelWidth: "100px",
          form: {
              file: ""
          },
          fileList: [],
          isshow: true,
          text: {
              type: "文件上传",
              prgname: "LIS112",
              btn: {
                  confirmBtnText: "立即上传",
                  cancelBtnText: "取消"
              }
          },
          flag: "0",
          msg: ""
      };
  },
  created() {},
  methods: {
      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
          this.$notify.warning({
              title: "警告",
              message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
          });
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
          this.form.file = file.raw;
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
          let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
          let size = file.size / 1024 / 1024;
          if (extension !== "dat" && extension !== "repx") {
              this.$notify.warning({
                  title: "警告",
                  message: `只能上传DAT(*dat)文件或者REPX(*repx)，且不超过10M`
              });
          }
          if (size > 10) {
              this.$notify.warning({
                  title: "警告",
                  message: `文件大小不得超过10M`
              });
          }
      },
      // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
          this.$notify.success({
              title: "成功",
              message: `文件上传成功`
          });
      },
      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
          this.$notify.error({
              title: "错误",
              message: `文件上传失败`
          });
      },
      uploadFile() {
          if (this.form.file) {
              var URL = this.$tool.baseUrl.replace("api", "z") + "fileupload";
              let formData = new FormData();
              formData.append("file", this.form.file);
              formData.append("action", this.text.prgname);
              formData.append("param1", this.text.param1);
              axios
                  .post(URL, formData, { "Content-Type": "multipart/form-data" })
                  .then(res => {
                      if (res.status == 200) {
                          if (res.data && res.data.hasOwnProperty("flag")) {
                              this.flag = res.data.flag;
                          }
                          if (res.data && res.data.hasOwnProperty("msg")) {
                              this.msg = res.data.msg;
                          } else {
                              this.flag = "1";
                          }
                          this.isshow = false;
                      } else {
                          this.flag = "0";
                          this.msg = "上传文件失败！" + res.statusText;
                          this.isshow = true;
                      }
                      this.isSuccess();
                  })
                  .catch(e => {
                      console.log("error", e);
                  });
          } else {
              this.$alert("请先选择文件再上传！");
          }
      },
      isSuccess() {}
  }
};
</script>

<style lang="scss" scoped>
</style>
